<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>智能租房</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* 搜索区域背景样式 */
        .search-header {
            background: url('/static/img/home-bg.jpg') no-repeat center center;
            background-size: cover;
            border-radius: 15px;
            padding: 60px 30px;
            margin-bottom: 30px;
            color: white;
            text-align: center;
            position: relative;
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 添加半透明遮罩让文字更清晰 */
        .search-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 15px;
            z-index: 1;
        }

        .search-header-content {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .search-title {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .search-subtitle {
            font-size: 1.2em;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        /* 搜索表单样式 - 透明背景 */
        .search-form-container {
            background: transparent;
            padding: 25px 0;
            border-radius: 10px;
            margin-top: 20px;
        }

        /* 导航标签样式 */
        .my-nav-tab {
            margin: 0 0 15px 0;
            background: transparent;
            border: none;
            justify-content: center;
        }

        .my-nav-tab .nav-item {
            margin: 0 5px;
        }

        .my-nav-tab .nav-link {
            color: white;
            font-weight: bold;
            border: 2px solid rgba(255,255,255,0.5);
            border-radius: 25px;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
            padding: 8px 20px;
            transition: all 0.3s ease;
        }

        .my-nav-tab .nav-link.active {
            background: rgba(255,255,255,0.9);
            color: #3498db;
            border-color: white;
        }

        .my-nav-tab .nav-link:hover {
            background: rgba(255,255,255,0.3);
            color: white;
        }

        /* 表单样式 - 透明背景 */
        #my-form {
            background: transparent;
        }

        /* 输入框样式 - 透明背景 */
        #txt {
            background: rgba(255,255,255,0.9);
            border: 2px solid rgba(255,255,255,0.5);
            border-radius: 25px;
            padding: 12px 20px;
            color: #333;
            font-size: 16px;
        }

        #txt:focus {
            background: rgba(255,255,255,0.95);
            border-color: white;
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
            outline: none;
        }

        #txt::placeholder {
            color: #666;
        }

        /* 搜索按钮样式 */
        .my-btn {
            margin-left: 10px;
            border-radius: 25px;
            padding: 12px 28px;
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid rgba(255, 255, 255, 0.8);
            color: #3498db;
            font-weight: bold;
            font-size: 16px;
            transition: all 0.3s ease;
            min-width: 85px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .my-btn:hover {
            background: white;
            color: #2980b9;
            border-color: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        /* 下拉列表样式 */
        #list {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .list-group-item {
            background: rgba(255,255,255,0.95);
            border: none;
            border-bottom: 1px solid #eee;
            padding: 12px 15px;
        }

        .list-group-item:hover {
            background: #f8f9fa;
        }

        /* 其他原有样式保持不变 */
        .area-info {
            margin: 20px 0;
            padding: 15px;
            background: #e8f4f8;
            border-radius: 8px;
            border-left: 4px solid #2980b9;
        }

        .new-house {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }

        .house-item {
            border: 1px solid #ddd;
            padding: 15px;
            width: 280px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }

        .house-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .house-item img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 5px;
        }

        .price {
            color: #e74c3c;
            font-weight: bold;
            font-size: 1.1em;
        }

        .course-info {
            margin: 10px 0;
            font-weight: bold;
        }

        .course-info1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        /* 热点房源样式 - 紧凑一排布局 */
        .hot-house {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: nowrap;
            overflow-x: auto;
            padding-bottom: 10px;
        }

        .house-item-small {
            flex: 0 0 23%;
            border: 1px solid #e0e0e0;
            padding: 10px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            min-width: 200px;
        }

        .house-item-small:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .img-box-small {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 8px;
        }

        .course-info-small {
            margin-bottom: 5px;
        }

        .house-address-small {
            font-size: 13px;
            font-weight: bold;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .course-info1-small {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .house-details-small {
            font-size: 12px;
            color: #666;
        }

        .price-small {
            color: #e74c3c;
            font-weight: bold;
            font-size: 14px;
        }

        .house-views-small {
            font-size: 11px;
            color: #888;
            border-top: 1px solid #f0f0f0;
            padding-top: 5px;
        }

        body {
            background: #f8f9fa;
            min-height: 100vh;
        }

        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 30px;
        }
    </style>
</head>
<body>
    <!-- 搜索标题区域 -->
    <div class="search-header">
        <div class="search-header-content">
            <h1 class="search-title">智能租房网站</h1>
            <p class="search-subtitle">给您推荐优质房源</p>

            <!-- 搜索表单容器 -->
            <div class="search-form-container">
                <!-- 智能搜索框 -->
                <div class="row">
                    <div class="col-12">
                        <ul class="nav nav-tabs my-nav-tab">
                            <li class="nav-item chanle1 active">
                                <span class="nav-link active">地区搜索</span>
                            </li>
                            <li class="nav-item chanle2">
                                <span class="nav-link">户型搜索</span>
                            </li>
                        </ul>

                        <form class="form-inline" role="form" id="my-form" action="/query">
                            <div class="form-group d-flex w-100">
                                <input type="text" class="form-control flex-grow-1" id="txt" name="addr"
                                       placeholder="请输入区域、商圈或小区名开始找房">
                                <button type="submit" class="btn btn-info my-btn" id="btn">
                                    <i class="fas fa-search"></i> 搜索
                                </button>
                            </div>
                            <ul id="list" class="list-group mt-2" style="position: absolute; z-index: 1000; width: 100%;"></ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- 当前城市和房源总数 -->
        <div class="area-info">
            <span style="color:#2980b9">当前城市:</span>
            <span style="color:#e74c3c">北京</span>
            &nbsp;
            <span style="color:#2980b9">房源总数:</span>
            <span style="color:#e74c3c">{{ num }}</span>
        </div>

        <h2><i class="fas fa-home"></i> 最新房源</h2>
        <div class="new-house">
            {% for house in house_new_list %}
            <div class="house-item">
                <a href="/house/{{ house.id }}">
                    <img class="img-fluid img-box" src="/static/img/房源.jpg" alt="{{ house.address }}">
                </a>
                <div class="course-info">
                    <span>{{ house.address }}</span>
                </div>
                <div class="course-info1">
                    <span>{{ house.rooms }} - {{ house.area }}平方米</span>
                    <span class="price">¥{{ house.price }}</span>
                </div>
                <div class="mt-2">
                    <small class="text-muted">
                        <i class="fas fa-eye"></i> 热度 {{ house.page_views if house.page_views else 0 }}
                    </small>
                </div>
                <!-- 在最新房源部分后面添加 -->
                <div class="text-center mt-4">
                    <a href="/list/pattern/1" class="btn btn-outline-primary">
                        <i class="fas fa-list"></i> 更多北京房源
                              </a>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- 热点房源部分 -->
<!-- 热点房源部分 -->
<h2 class="mt-5"><i class="fas fa-fire"></i> 热点房源</h2>
<div class="hot-house">
    {% for house in house_hot_list %}
    <div class="house-item-small">
        <a href="/house/{{ house.id }}">
            <img class="img-fluid img-box-small" src="/static/img/房源.jpg" alt="{{ house.address }}">
        </a>
        <div class="course-info-small">
            <span class="house-address-small">{{ house.address }}</span>
        </div>
        <div class="course-info1-small">
            <span class="house-details-small">{{ house.rooms }} - {{ house.area }}平方米</span>
            <span class="price-small">¥{{ house.price }}</span>
        </div>
        <div class="house-views-small">
            <small class="text-muted">
                <i class="fas fa-eye"></i> {{ house.page_views if house.page_views else 0 }}
            </small>
        </div>
        <div class="text-center mt-4">
    <a href="/list/hot_house/1" class="btn btn-outline-danger">
        <i class="fas fa-fire"></i> 更多热点房源
    </a>
</div>
    </div>
    {% endfor %}
</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 选择搜索选项
        $(".chanle1").on('click', function () {
            if ($('.chanle1').hasClass('active')) {
                $(".chanle1").removeClass('active');
                $("#txt").attr('name', '');
                $("#txt").attr('placeholder', '');
                $("#txt").val('');
                $("#list").empty();
            }
            $(".chanle2").removeClass('active');
            $(".chanle1").addClass('active');
            $("#txt").attr('name', 'addr');
            $("#txt").attr('placeholder', '请输入区域、商圈或小区名开始找房');
        });

        $(".chanle2").on('click', function () {
            if ($('.chanle2').hasClass('active')) {
                $(".chanle2").removeClass('active');
                $("#txt").attr('name', '');
                $("#txt").attr('placeholder', '');
                $("#txt").val('');
                $("#list").empty();
            }
            $(".chanle1").removeClass('active');
            $(".chanle2").addClass('active');
            $("#txt").attr('name', 'rooms');
            $("#txt").attr('placeholder', '请输入户型开始找房，例如：1室1厅');
        });

        // 监听输入框状态
        var oTxt = document.getElementById('txt');
        var oBtn = document.getElementById('btn');
        var oList = document.getElementById('list');
        var cplock = false;

        $('#txt').on('compositionstart', function () {
            cplock = true;
        });

        $('#txt').on('compositionend', function () {
            cplock = false;
            var keyWord = oTxt.value;
            if (keyWord.trim() !== '') {
                searchByIndexOf(keyWord);
            } else {
                oList.innerHTML = "";
            }
        });

        $('#txt').on('input', function () {
            if (!cplock) {
                var keyWord = oTxt.value;
                if (keyWord.trim() !== '') {
                    searchByIndexOf(keyWord);
                } else {
                    oList.innerHTML = "";
                }
            }
        });

        function searchByIndexOf(keyWord) {
            $(".my-nav-tab li").each(function (index, element) {
                if ($(this).hasClass("active")) {
                    var info = $(this).text().trim();
                    var data = {"kw": keyWord, "info": info};

                    $.ajax({
                        url: "/search/keyword/",
                        type: 'post',
                        dataType: 'json',
                        data: data,
                        success: function (data) {
                            if (data['code'] == 0) {
                                warning_str = '未找到关于' + keyWord + '的房屋信息！';
                                alert(warning_str);
                                oList.innerHTML = "";
                            }
                            if (data['code'] == 1) {
                                var list = data['info'];
                                console.log('search', list);
                                oList.innerHTML = "";
                                var item = null;
                                for (var i = 0; i < list.length; i++) {
                                    item = document.createElement('li');
                                    item.setAttribute("class", "list-group-item li-style");
                                    item.setAttribute("title", list[i]['t_name']);
                                    var li_text = list[i]['t_name'] +
                                        '<span class="badge bg-primary float-right">大约有' +
                                        list[i]['num'] + '套房</span>';
                                    item.innerHTML = li_text;
                                    oList.appendChild(item);
                                }
                                info_to_txt();
                            }
                        },
                        error: function() {
                            alert('搜索请求失败，请稍后重试！');
                        }
                    });
                }
            });
        }

        function info_to_txt() {
            $(".li-style").on('click', function() {
                var text = $(this).text();
                var cleanText = text.replace(/大约有\d+套房/, '').trim();
                $("#txt").val(cleanText);
                $("#list").empty();
            });
        }

        $("#my-form").on('submit', function(e) {
            e.preventDefault();
            var keyword = $("#txt").val();
            if (keyword.trim() === '') {
                alert('请输入搜索关键词！');
                return false;
            }
            alert('搜索提交: ' + keyword);
        });
    </script>
</body>
</html>